<template>
  <!-- 左侧导航栏的开始 -->
  <div class="navMenu">
    <label v-for="navMenu in navMenus">
      <el-menu-item v-if="navMenu.children==null&&navMenu" :key="navMenu.menuId" :data="navMenu" :index="navMenu.url">
        <i :class="navMenu.menuIcon"></i>
        <span slot="title">{{navMenu.menuName}}</span>
      </el-menu-item>

      <el-submenu v-if="navMenu.children&&navMenu" :key="navMenu.menuId" :data="navMenu" :index="navMenu.menuName">
        <template slot="title">
          <i :class="navMenu.menuIcon"></i>
          <span slot="title"> {{navMenu.menuName}}</span>
        </template>
        <NavMenu :navMenus="navMenu.children"></NavMenu>
      </el-submenu>
    </label>
  </div>
  <!-- </el-menu> -->

  <!-- 左侧导航栏结束 -->
</template>

<script>
  import {
    getStore
  } from "../util/util.js"
  export default {
    name: 'NavMenu',
    props: ['navMenus'],
    data() {
      return {
        collapsed: false
      };
    },
    created() {
      // 监听
      // this.$root.Bus.$on('toggle', value => {
      //   this.collapsed = !value
      // })
    },
    methods: {
    }
  }
</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    /* width: 200px; */
    min-height: 400px;
  }

  .xy-menu_btn {
    position: absolute;
    bottom: 100px;
    float: right;
  }
</style>
